<template>
  <div class="content">
    <!-- 中间区域标题 -->
    <div class="title">
      <div v-for="item in data_statistics" :key="item.id">
        <div :style="{ 'width': '120px', 'height': '40px', 'background': 'url(' + require('@/assets/images/QqDeMwwF7_1600742755667_C5jtmApBDS.png') + ') no-repeat center center', 'background-size': '100% 100%' }">
          {{ item.title }}
        </div>
        <p
          style=" display: flex; justify-content: center; font-size: 54px; font-family: Abduction2000; font-size: 30px; color: rgb(255, 200, 0)">
          {{ item.people_counting }}
        </p>
      </div>
    </div>
    <!-- 地图区域  -->
    <div @dblclick="init_map_data" ref="map_dom_charts" style="width: 815px; height: 650px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from '@/api/Interceptor.js'
import EventBus from "@/util/event-bus.js";

export default {
  data() {
    return {
      // 地图上文标题数据
      data_statistics: [
        { id: 1, title: '退役军人数量', people_counting: 38568 },
        { id: 2, title: '参加培训人数', people_counting: 25127 },
        { id: 3, title: '培训计划数量', people_counting: 490 }
      ],

      flag: true,
      // 定义两个变量，nowArea储存当前的区域，lastArea存储父级区域（当前的区域将作为下一个区域的父级）
      nowArea: "zhongguo",  // 现在的
      lastArea: "zhongguo", // 上一个 
      // 省区域
      // jsonMap: {
      //   "广东": "guangdong",
      //   "广西": "guangxi",
      //   "湖南": "hunan",
      //   "安徽": "anhui",
      //   "澳门": "aomen",
      //   "北京": "beijing",
      //   "重庆": "chongqing",
      //   "福建": "fujian",
      //   "甘肃": "gansu",
      //   "贵州": "guizhou",
      //   "海南": "hainan",
      //   "河北": "hebei",
      //   "黑龙": "heilongjiang",
      //   "河南": "henan",
      //   "湖北": "hubei",
      //   "江苏": "jiangsu",
      //   "江西": "jiangxi",
      //   "吉林": "jilin",
      //   "辽宁": "liaoning",
      //   "内蒙": "neimenggu",
      //   "宁夏": "ningxia",
      //   "青海": "qinhai",
      //   "山东": "shandong",
      //   "山西": "shanxi",
      //   "陕西": "shanxi1",
      //   "四川": "sichuan",
      //   "台湾": "taiwan",
      //   "天津": "tianjin",
      //   "香港": "xianggang",
      //   "新疆": "xinjiang",
      //   "西藏": "xizang",
      //   "云南": "yunnan",
      //   "浙江": "zhejiang"
      // },
      jsonMap: {
        "北京": "beijing",
      },
      // 地图提示数据 
      mapdata: [
        {
          name: "西藏自治区",
          parameter: { retirement: 26, train: 123, accomplish_train: 2349 }
        },
        {
          name: "黑龙江省",
          parameter: { retirement: 27, train: 123, accomplish_train: 2349 }
        },
        {
          name: "吉林省",
          parameter: { retirement: 27, train: 123, accomplish_train: 2349 }
        },
        {
          name: "山东省",
          // value: [128.03, 47.01, 1007],
          parameter: { retirement: 27, train: 123, accomplish_train: 2349 }
        }
      ],
      // 地图状态 
      option: null,
    }
  },

  mounted() {
    // 初始化地图数据 
    this.init_map_data()
  },
  methods: {
    // 地图渲染数据请求
    async init_map_data(_, url = "/areas_v3/bound/geojson?code=100000_full") {
      let data = await axios.get(url)
      this.init_map_charts(data);
      if (!this.flag) {
        EventBus.$emit('selected_area', { name: '全国' })
      }
      this.flag = false

    },

    // 初始化地地图渲染 
    init_map_charts(data) {
      // 地图实例 
      const map_charts = echarts.init(this.$refs["map_dom_charts"]);
      // 配置项 
      let option = {
        // 背景颜色
        backgroundColor: "rgba(59, 64, 67, 0)",
        //地图位置
        layoutCenter: ['50%', '67%'],
        // 地图大小
        layoutSize: '87%',
        // 提示浮窗样式
        tooltip: {
          // 窗口外框
          trigger: 'item',
          // 位置显示 
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = {};
            // obj[['top', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            obj['top'] = pos[1] - 140
            obj['left'] = pos[0]
            // console.log(obj);
            return obj;
          },
          // 文字显现 
          textStyle: {
            color: 'white',
            fontSize: 12,
          },
          padding: 0,
          borderWidth: 0,
          borderColor: 'rgba(10, 122, 124, 0)',
          backgroundColor: 'rgba(10, 122, 124, 0)',
        },
        // 地图配置
        geo: {
          map: "china",
          zoom: 1.3,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              // 地图边线
              borderColor: "rgba(9, 194, 166, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                // 区域内渐变色
                colorStops: [{
                  offset: 0,
                  color: "rgba(234, 231, 231, .1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(234, 231, 231, .1)", // 100% 处的颜色
                },
                ],
                globalCoord: false, // 缺省为 false
              },
              // shadowColor: "rgba(128, 217, 248, 1)",
              // shadowOffsetX: -2,
              // shadowOffsetY: 2,
              // shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: 'rgba(234, 231, 231, .1)',
              borderWidth: 1,
            },
          },

          tooltip: {
            formatter: (params) => {
              let tmp = this.mapdata.filter(item => item.name === params.name)
              const str =
                `<div class="tooltipArea">
                  <p> ${params.name} </p>
                  <ul>
                      <li> 退役军人总人数 : <span>${tmp.length ? tmp[0].parameter.retirement + '人' : '0人'}</span> </li/>
                      <li> 参与培训人数 : <span>${tmp.length ? tmp[0].parameter.train + '人' : '0人'}</span> </li/>
                      <li> 完成培训人数 : <span>${tmp.length ? tmp[0].parameter.accomplish_train + '人' : '0人'}</span> </li/>
                  </ul>
                </div>`
              return str
            }
          }
        }
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致  *ps: 这是一个 echarts 的原型方法; 
      echarts.registerMap("china", data)
      // 地图挂载 
      map_charts.setOption(option);
      this.map_run_in_hole(map_charts, option)
    },

    // 地图下钻
    map_run_in_hole(map_charts, option) {
      map_charts.off('click')
      // 地图点击事件 实现地图下转 

      var result
      map_charts.on('click', async ({ name }) => {
        result = null
        switch (name) {
          case '北京市':
            result = await axios.get('/areas_v3/bound/geojson?code=110000_full')
            break;
          case '新疆维吾尔自治区':
            result = await axios.get('/areas_v3/bound/geojson?code=650000_full')
            break;
          case '西藏自治区':
            result = await axios.get('/areas_v3/bound/geojson?code=540000_full')
            break;
          case '青海省':
            result = await axios.get('/areas_v3/bound/geojson?code=630000_full')
            break;
          case '四川省':
            result = await axios.get('/areas_v3/bound/geojson?code=510000_full')
            break; s
          case '黑龙江省':
            result = await axios.get('/areas_v3/bound/geojson?code=230000_full')
            break;
          case '延庆区':
            result = await axios.get('/areas_v3/bound/geojson?code=110119')
            break;
          default:
            this.$message({ type: 'warning', center: true, message: '没有匹配数据, 双击地图任意返地图主页！' })
            map_charts.off('click')
            break;
        }

        console.log(result);
        if (result) {

          option.geo.zoom = .9
          option.geo.map = name
          // 地图位置
          option.layoutCenter = ['50%', '50%'],
            // 地图大小
            option.layoutSize = '87%',
            // 注册地图
            echarts.registerMap(name, result)
          // 重新渲染 
          map_charts.setOption(option, true)

          //选中地区改变 发布消息 
          EventBus.$emit('selected_area', { name })

        }
      })

    }


    // map_charts.off('dblclick')
    // 双肩返回上一层级 
    // map_charts.on('dblclick', ({ name }) => {
    //   // 注册地图
    //   option.geo.map = this.lastArea + '1'
    //   option.geo.zoom = 1
    //   //地图位置
    //   option.layoutCenter = ['50%', '67%'],
    //   // 地图大小
    //   option.layoutSize = '90%',
    //   echarts.registerMap(this.lastArea + '1', zhongguo )
    //   map_charts.setOption(option, true)
    // })
  }



};
</script>
<style lang="scss" >
.content {
  position: relative;

  .title {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    width: 500px;
    line-height: 36px;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }
}

.tooltipArea {
  background: url(~@/assets/images/82de101dc74674219d38d11457c6105.png) no-repeat center center;
  background-size: 100% 100%;
  background-color: rgba(59, 64, 67, .2);
  width: 140px;
  height: 140px;

  p {
    padding: 2px 10px;

  }

  ul {
    list-style: none;
    font-size: 12px;
    padding: 0 10px;

    li {
      line-height: 18.4px;

      span {
        font-size: 13px;
      }
    }
  }
}
</style>